<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>促销活动管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加预售活动</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="ruleForm" label-width="120px" ref="ruleForm" class="demo-ruleForm">
      <p>预售活动基本信息</p>
      <el-form-item label="分公司" v-show="this.branchId === 1">
        <el-select v-model="ruleForm.branch" filterable clearable placeholder="请选择分公司">
          <el-option
            v-for="item in branchList"
            :label="item.branch_Name"
            :value="item.branch_Id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="一级客资类型">
        <el-select v-model="ruleForm.client" multiple>
          <el-option
            v-for="item in clientList"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-col :span="5">-->
      <el-form-item prop="" label="预售开始时间">
        <el-date-picker type="date" placeholder="请选择时间" value-format="yyyy-MM-dd" v-model="ruleForm.advanceStart" @change="start1"></el-date-picker>
      </el-form-item>
      <!--</el-col>-->
      <!--<el-col class="line" :span="2">-</el-col>-->
      <el-form-item prop="" label="结束时间">
        <el-date-picker type="date" placeholder="请选择时间" value-format="yyyy-MM-dd" v-model="ruleForm.advanceEnd" @change="end1"></el-date-picker>
      </el-form-item>
      <!--<el-col :span="5">-->
        <el-form-item prop="" label="配送开始时间">
          <el-date-picker type="date" placeholder="请选择时间" value-format="yyyy-MM-dd" v-model="ruleForm.deliveryStart" @change="start2"></el-date-picker>
        </el-form-item>
      <!--</el-col>-->
      <!--<el-col class="line" :span="2">-</el-col>-->
      <el-form-item prop="" label="结束时间">
        <el-date-picker type="date" placeholder="请选择时间" value-format="yyyy-MM-dd" v-model="ruleForm.deliveryEnd" @change="end2"></el-date-picker>
      </el-form-item>
      <el-form-item label="活动说明" prop="desc">
        <el-input type="textarea" v-model="ruleForm.explain" style="width: 500px"></el-input>
      </el-form-item>
      <p>商品信息</p>
      <el-button @click="simpleList($event)">选择单品</el-button>
      <el-button @click="allDelete()">全部删除</el-button>
      <el-table
        :data="tableData"
        max-height="200"
        border
        style="width: 100%; margin-top: 10px">
        <el-table-column
          prop="productId"
          label="商品ID"
          align="center"
          width="">
        </el-table-column>
        <el-table-column
          prop="productName"
          label="商品名"
          align="center"
          width="">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="">
          <template scope="scope">
            <el-button @click="deletea(scope.$index, scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--<el-pagination-->
        <!--v-if="total"-->
        <!--@current-change="handleCurrentChange"-->
        <!--:page-size="pageSize"-->
        <!--layout="total, prev, pager, next"-->
        <!--:total="total"-->
        <!--style="padding-top:10px;text-align: right;">-->
      <!--</el-pagination>-->
      <el-form-item style="margin-top: 30px; margin-left: -80px">
        <el-button type="primary" style="margin-right: 30px" @click="submit('ruleForm')">提  交</el-button>
        <router-link :to="{'name': 'home' }">
          <el-button type="primary">取  消</el-button>
        </router-link>
      </el-form-item>
    </el-form>
    <!--选择单品弹窗-->
    <el-dialog class="dialog" title="选择商品" v-model="dialogSimple">
      <el-form style="margin-top: 20px" :inline="true" :model="formSimple" class="demo-form-inline">
        <el-form-item label="ID" placeholder="请输入商品ID">
          <el-input v-model="formSimple.ID"></el-input>
        </el-form-item>
        <el-form-item label="名称" placeholder="请查询的商品名称">
          <el-input v-model="formSimple.name"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 150px" >
          <el-button type="primary" @click="simpleList($event)">搜索</el-button>
        </el-form-item>
      </el-form>
      <div style="display: block">
        <el-button @click="lotAdd">批量添加</el-button>
        <el-button @click="allDelete2">全部删除</el-button>
      </div>
      <el-table
        :data="tableData2"
        v-loading.body="isLoading"
        height="200"
        ref="multipleTable"
        tooltip-effect="dark"
        border
        style="width: 100%"
        @select-all="handleSelectionChange"
        @selection-change="handleChange"
        @select="handleSingle">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="productId"
          label="商品ID"
          align="center"
          width="">
        </el-table-column>
        <el-table-column
          prop="productName"
          label="商品名称"
          show-overflow-tooltip
          align="center"
          width="">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="">
          <template scope="scope">
            <el-button v-show="scope.row.name === 'add' " @click="add(scope.$index, scope.row, $event)" size="small">添加</el-button>
            <el-button v-show="scope.row.name === 'cancel' " @click="add(scope.$index, scope.row, $event)" size="small">撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="total2"
        @current-change="handleCurrentChange2"
        :page-size="pageSize2"
        layout="total, prev, pager, next"
        :total="total2"
        style="padding-top:10px;text-align: right;">
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import { cms } from '../../config/proxy.js'
  export default {
    data () {
      return {
        ruleForm: {
          branch: '',
          client: '',
          explain: '',
          advanceStart: '',
          advanceEnd: '',
          deliveryStart: '',
          deliveryEnd: ''
        },
        clientList: [],
        branchList: [],
        tableData: [],
        total: 10,
        currentPage: 1,
        pageSize: 10,
//      选择单品弹窗
        dialogSimple: false,
        formSimple: {
          ID: '',
          name: ''
        },
//      选择单品表格
        isLoading: false,
        tableData2: [],
        total2: '',
        currentPage2: 1,
        pageSize2: 10,
//      选中项的集合
        all: []
      }
    },
    methods: {
      submit (formName) {
        if (this.tableData.length === 0) {
          this.$message({
            showClose: true,
            message: '商品信息至少为一条!',
            type: 'error'
          })
          return false
        }
        const Data = {
          branchId: this.branchId === 1 ? this.ruleForm.branch : this.branchId,
          createBy: this.userName,
          distributionEndTime: this.ruleForm.deliveryEnd,
          distributionStartTime: this.ruleForm.deliveryStart,
          endTime: this.ruleForm.advanceEnd,
          explain: this.ruleForm.explain,
          products: this.tableData,
          startTime: this.ruleForm.advanceStart,
          userType: this.ruleForm.client.join(',')
        }
        cms.setUp(Data, (res) => {
          if (res.code === 0) {
            this.$message({
              showClose: true,
              message: '创建成功',
              type: 'success'
            })
          } else if (res.code === 400) {
            this.$message({
              showClose: true,
              message: '除活动说明外,均为必填项!!',
              type: 'error'
            })
          } else {
            this.$message({
              showClose: true,
              message: '请求服务器失败',
              type: 'error'
            })
          }
        })
      },
      deletea (index, row) {
        this.tableData.splice(index, 1)
      },
      handleCurrentChange (val) {
        this.currentPage = val
      },
      allDelete () {
        this.tableData = []
      },
//    单品列表
      simpleList (event) {
        if (this.branchId === 1) {
          if (this.ruleForm.branch === '' || this.ruleForm.advanceStart === '') {
            this.$message({
              showClose: true,
              message: '请选择分公司和预售开始时间',
              type: 'error'
            })
            return false
          }
        } else {
          if (this.ruleForm.advanceStart === '') {
            this.$message({
              showClose: true,
              message: '请选择预售开始时间',
              type: 'error'
            })
            return false
          }
        }
        if (event.target.innerText === '选择单品') {
          this.formSimple.ID = ''
          this.formSimple.name = ''
        }
//      重置3
        this.tableData2 = []
        this.currentPage2 = 1
        this.total2 = ''
        this.dialogSimple = true
        this.isLoading = true
        const queryData = {
          branchId: this.branchId === 1 ? this.ruleForm.branch : this.branchId,
          page: this.currentPage2,
          pageSize: this.pageSize2,
          productId: this.formSimple.ID,
          productName: this.formSimple.name,
          startTime: this.ruleForm.advanceStart
        }
        cms.goods(queryData, (res) => {
          setTimeout(() => {
            this.isLoading = false
          }, 500)
          if (res.message === 'ok' && res.content !== null) {
            if (this.tableData.length !== 0) {
              for (var i = 0; i < res.content.content.length; i++) {
                let a = true
                for (var j = 0; j < this.tableData.length; j++) {
                  if (res.content.content[i].productId === this.tableData[j].productId) {
                    res.content.content[i].name = 'cancel'
                    a = false
                  } else {
                    res.content.content[i].name = 'add'
                  }
                  if (a === false) {
                    j = this.tableData.length
                  }
                }
              }
            } else {
              res.content.content.forEach(function (item, index) {
                item.name = 'add'
              })
            }
            this.tableData2 = res.content.content
            this.total2 = res.content.count
          } else if (res.message === 'ok' && res.content === null) {
            this.total2 = ''
          } else {
            this.$message({
              showClose: true,
              message: '查询单品失败',
              type: 'error'
            })
            this.total2 = ''
          }
        })
      },
      start1 (val) {
        this.ruleForm.advanceStart = val
      },
      start2 (val) {
        this.ruleForm.deliveryStart = val
      },
      end1 (val) {
        this.ruleForm.advanceEnd = val
      },
      end2 (val) {
        this.ruleForm.deliveryEnd = val
      },
      handleSelectionChange (all) {
//        console.log('c')
        this.all = all
      },
      handleSingle (all, row) {
//        console.log('单选')
        this.all = all
//        this.$refs.multipleTable.toggleRowSelection(this.tableData2[0], false)
//        this.$refs.multipleTable.toggleRowSelection(this.tableData2[2], true)
//        this.$refs.multipleTable.toggleRowSelection(this.tableData2[1])
      },
      handleChange (all) {
        this.all = all
      },
      add (index, row, event) {
        if (event.target.innerText === '添加') {
          row.name = 'cancel'
          if (this.tableData.indexOf(row) === -1) {
            this.tableData.unshift(row)
          }
        } else {
          row.name = 'add'
          const index = this.tableData.indexOf(row)
          this.tableData.splice(index, 1)
        }
      },
      lotAdd () {
//        this.tableData2.forEach(function (item, index) {
//          item.name = 'add'
//        })
        this.all.forEach((item1, index1) => {
          this.tableData2.forEach(function (item, index) {
            if (item1 === item) {
              item.name = 'cancel'
            }
          })
        })
        this.all.forEach((item, index) => {
          if (this.tableData.indexOf(item) === -1) {
            this.tableData.unshift(item)
          } else {
          }
        })
      },
      allDelete2 () {
        this.$refs.multipleTable.clearSelection()
        this.tableData2.forEach(function (item, index) {
          item.name = 'add'
        })
      },
      handleCurrentChange2 (val) {
        this.currentPage2 = val
        this.tableData2 = []
        this.isLoading = true
        const queryData = {
          branchId: this.branchId === 1 ? this.ruleForm.branch : this.branchId,
          page: val,
          pageSize: this.pageSize2,
          productId: this.formSimple.ID,
          productName: this.formSimple.name,
          startTime: this.ruleForm.advanceStart
        }
        console.log(queryData)
        cms.goods(queryData, (res) => {
          console.log(res)
          setTimeout(() => {
            this.isLoading = false
          }, 500)
          if (res.message === 'ok' && res.content !== null) {
            res.content.content.forEach(function (item, index) {
              item.name = 'add'
            })
            this.tableData2 = res.content.content
          } else if (res.message === 'ok' && res.content === null) {
            this.total2 = ''
          } else {
            this.$message({
              showClose: true,
              message: '查询单品失败',
              type: 'error'
            })
            this.total2 = ''
          }
        })
      }
    },
    computed: mapState({
      userId: function (state) {
        if (!state.user.info.branchId) {
          this.$store.dispatch('SET_TOKEN')
        }
        return state.user.info.branchId
      },
      userName: function (state) {
        if (!state.user.info.user_name) {
          this.$store.dispatch('SET_TOKEN')
        }
        return state.user.info.user_name
      },
      branchId: function (state) {
        if (!state.user.info.branchId) {
          this.$store.dispatch('SET_TOKEN')
        }
        return state.user.info.branchId
      }
    }),
    created () {
//    分公司
      cms.getBranch({}, (res) => {
        if (res.message === 'ok') {
          this.branchList = res.content
        }
      })
//    客资
      cms.client({}, (res) => {
        if (res.message === 'ok') {
          this.clientList = res.content
        }
      })
    }
  }
</script>
<style>
  .dialog .el-form--inline div {
    display: inline-block;
    float: left;
  }
</style>
